<template>
  <div class="blog-list-container">
    <div class="list-container">
      <div class="list-title">
        博客
      </div>
      <a-menu v-model="current" class="menu-container" mode="horizontal" @select="menuClick">
        <a-menu-item key="createdTime"><img class="filter-icon" src="../../assets/filter/new.png" alt="new">最新</a-menu-item>
        <a-menu-item key="blogGoods"><img class="filter-icon" src="../../assets/filter/like.png" alt="new">点赞最多</a-menu-item>
        <a-menu-item key="blogComment"><img class="filter-icon" src="../../assets/filter/comment.png" alt="new">评论最多</a-menu-item>
        <a-menu-item key="blogRead"><img class="filter-icon" src="../../assets/filter/reading.png" alt="new">阅读最多</a-menu-item>
        <a-menu-item key="blogCollection"><img class="filter-icon" src="../../assets/filter/collection.png" alt="new">收藏最多</a-menu-item>
      </a-menu>
    </div>
    <a-spin tip="列表加载中" :spinning="listLoading">
      <div class="read-list">
        <router-link v-for="item in page.list" :key="item.blogId" :to="/info/+item.blogId" class="read-container">
          <!--博客封面-->
          <div v-if="item.blogImage" class="read-image">
            <img v-lazy="item.blogImage" alt="">
          </div>
          <!--阅读信息-->
          <div :class="item.blogImage?'read-info':'no-cover-readinfo read-info'">
            <!--博客标题-->
            <div class="read-title">
              <span>
                <span v-if="item.blogHot>=1" style="color:red;font-size: 16px;margin-right:15px">[置顶]</span>{{ item.blogTitle }}
              </span>
              <span style="font-size: 13px;color:#3d8fd1">
                <a-icon type="link" /> {{ item.nickname||'发布人' }}
              </span>
            </div>
            <!--博客简介-->
            <div class="blog-about">
              {{ item.blogRemark?item.blogRemark:'暂无简介' }}
            </div>
            <!--博客简介下面的信息-->
            <div class="read-bottom">
              <div class="read-type" style="display:flex;justify-content: flex-start;align-items: center">
                分类: <a-tag color="green">{{ item.typeName }}</a-tag>
                <div class="read-type-right" v-if="item.tagNameList.length>0">
                  标签: <a-tag class="read-type-right-tag" v-for="(n,index) in item.tagNameList.slice(0,5)" :key="index" :color="n.tagColor">{{ n.tagName }}</a-tag>
                </div>
              </div>
              <div class="time-goods">
                <div class="created-time">
                  {{ item.createdTime }}
                </div>
                <div class="article-info">
                  <a-icon type="eye" /> {{ item.blogRead }}
                  <a-icon type="heart" /> {{ item.blogCollection }}
                  <a-icon type="like" /> {{ item.blogGoods }}
                  <a-icon type="message" /> {{ item.blogComment }}
                </div>
              </div>
            </div>
          </div>
        </router-link>
      </div>
    </a-spin>
    <a-pagination show-quick-jumper :page-size="5" :default-current="0" :total="page.countTotal" :show-total="total => `总共 ${total} 条`" @change="onChange" />
  </div>
</template>

<script>
import blogApi from '@/api/blog'
export default {
  name: 'BlogList',
  data() {
    return {
      current: ['createdTime'],
      page: {
        currentPage: 0, // 当前页
        pageSize: 5, // 页面大小
        pageTotal: 0, // 总页数
        countTotal: 0, // 总条数
        sortColumn: '', // 排序字段
        sortMethod: 'asc', // 排序方法
        list: [], // 数据
        params: {} // 条件查询参数
      },
      listLoading: true
    }
  },
  watch: {
    '$route.params.blogTitle': function(newVal, oldVal) {
      if (newVal) {
        this.page.params.blogTitle = window.decodeURI(newVal)
        this.getBlogList()
      }
    }
  },
  created() {
    if (this.$route.params.blogTitle) {
      this.page.params.blogTitle = window.decodeURI(this.$route.params.blogTitle)
    }
    this.getBlogList()
  },
  methods: {
    menuClick(e) {
      this.page.sortColumn = e.key
      this.page.sortMethod = 'desc'
      this.getBlogList()
    },
    onChange(e) {
      this.page.currentPage = e
      this.getBlogList()
    },
    getBlogList() {
      this.listLoading = true
      blogApi.getByPage(this.page).then(res => {
        if (res.code === 200) {
          this.page = res.data
          this.listLoading = false
        } else {
          this.listLoading = false
        }
      }).catch(() => {
        this.listLoading = false
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .no-cover-readinfo{
    width: 100% !important;
    padding-left: 15px;
  }
  .ant-menu-horizontal{
    border-bottom: none;
  }
  .blog-list-container{
    width: 100%;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    .list-container{
      width: 100%;
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15px;
      .list-title{
        font-size: 20px;
        color: #717682;
      }
      .menu-container{
        background-color: #f5f5f5;
        .filter-icon{
          width: 20px;
          height: 20px;
          margin-right: 5px;
        }
      }
    }
    .read-list{
      width: 100%;
      display: flex;
      flex-flow: column nowrap;
      .read-container{
        color: #333333;
        width: 100%;
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
        background-color: #ffffff;
        margin-bottom: 15px;
        .read-image{
          width: 30%;
          padding: 20px;
          img{
            width: 100%;
            border-radius: 2px;
            height: 117px;
          }
        }
        .read-info{
          width: 70%;
          display: flex;
          justify-content: space-between;
          flex-flow: column nowrap;
          .read-title{
            color: #717682;
            font-size: 16px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            padding: 10px 10px 10px 0;
            display: flex;
            justify-content: space-between;
          }
          .blog-about{
            max-height: 60px;
            overflow: hidden;
            text-overflow: ellipsis;
            color: #a2a2a2;
          }
          .read-bottom{
            padding: 15px 15px 15px 0;
            display: flex;
            flex-flow: row nowrap;
            justify-content: space-between;
            align-items: center;
            font-size: 13px;
            color: #717682;
            .time-goods{
              font-size: 12px;
            }
          }
        }
      }
    }
  }

</style>
